<template>
	<view class="content">
		<view class="place-time">
			<view class="place-time-tp">
				<view class="place-time-name">是否接单</view>
				<view class="place-time-con">
					<radio-group>
						<label @click="formData.work_status = 1">
							<radio :checked="formData.work_status == 1 ? true : false" />接单
						</label>
						<label @click="formData.work_status = 2">
							<radio :checked="formData.work_status == 2 ? true : false" />休息
						</label>
						<!--<label>
							<radio />下线
						</label>-->						
					</radio-group>
				</view>
			</view>
			
			<view class="place-time-tp">
			    <view class="place-time-name">接单开始时间</view>
			    <view class="place-time-con">
					<picker mode="time" @change="workStartHourChange">
			            <text>{{formData.work_start_hour ? formData.work_start_hour : '请设置接单开始时间'}}</text>
			            <text class="iconfont icon-jinrujiantou"></text>
					</picker>
			    </view>
			</view>
			
			<view class="place-time-bt">
				<view class="place-time-name">接单结束时间</view>
				<view class="place-time-con">
					<picker mode="time" @change="workEndHourChange">
					    <text>{{formData.work_end_hour ? formData.work_end_hour : '请设置接单结束时间'}}</text>
					    <text class="iconfont icon-jinrujiantou"></text>
				    </picker>
				</view>
			</view>
			
		</view>		

		<view class="time-c">
			<view class="place-rem-tit">
				<text>接单时间设置</text>
				<text>（可设置最近3天接单时间）</text>
			</view>
			<view class="time-set">
				<view class="time-lf">
					<block v-for="(item, index) in list_data" :key="index">
					    <view class="time-tit" :class="list_data_key == index ? 'time-act' : ''" @click="dateSwitch(index)">{{item.day}}({{item.week}})</view>
					</block>
				</view>
				<view class="time-rt">
					<block v-for="(item, index) in time_slot" :key="index">
						<text class="time-con" :class="formData.no_pre_hour_slot.indexOf(item.date) > -1 ? 'time-con-act' : ''" @click="removePreTime(index)">{{item.time}}</text>
					</block>
				</view>					
			</view>
		</view>
		
		<view class="h110"></view>
		<view class="detail-sel">
			<view class="detail-btn" @click="setWorkTime">保存设置</view>
		</view>
		
	</view>

</template>

<script>
	const app = getApp();
	const request = require('../../utils/request');
	export default{
		data(){
			return{
				/**
				 * 表单数据
				 */
				formData:{
					work_status:'', //技师工作状态
					work_start_hour:'', //技师接单开始时间
					work_end_hour:'', //技师接单结束时间
					no_pre_hour_slot:[], //技师不可预约时间段
				},
				//服务时间数据
				list_data:[],
				list_data_key:0,
				//服务时间时、分数据
				time_slot:[],
				time_slot_key:null,
			}
		},
		onLoad()
		{
			var that = this;
			that.load_service_time(); //获取服务时间
			
			that.load_get_work_time(); //获取技师服务时间
		},
		onShow()
		{
			
		},
		methods:{
			/**
			 * 技师接单开始时间
			 */
			workStartHourChange:function(e)
			{
				//console.log(e);
				var that = this;
				that.formData.work_start_hour = e.detail.value;
				that.load_service_time(); //获取服务时间
			},
			/**
			 * 技师接单结束时间
			 */
			workEndHourChange:function(e)
			{
				//console.log(e);
				var that = this;
				that.formData.work_end_hour = e.detail.value;
				that.load_service_time(); //获取服务时间
			},
			/**
			 * 获取技师服务时间
			 */
			load_service_time:function()
			{
				var that = this;
				let formData = {
					work_start_hour:that.formData.work_start_hour,
					work_end_hour:that.formData.work_end_hour
				};
				//网络请求
				request(app.globalData.api_url+'/v1/techn/pre_time', 'POST', formData).then((res) => {
					if(res.data.code == 0)
					{
						that.list_data = res.data.data;
						that.list_data_key = 0;
						that.time_slot = that.list_data[that.list_data_key]['time_slot'];
						
						
						
					}else
					{
						/*uni.showToast({
							title:res.data.msg,
							icon:'none'
						});
						app.is_login_check(res.data);
						app.is_techn_check(res.data);*/
					}
				});
			},
			/**
			 * 右侧日期切换
			 */
			dateSwitch:function(index)
			{
				var that = this;
				let list_data = that.list_data;
				that.time_slot = list_data[index]['time_slot'];
				that.list_data_key = index;
				that.time_slot_key = null;
			},
			/**
			 * 移除预约时间
			 */
			removePreTime:function(index)
			{
				var that = this;
				let list_data = that.list_data;
				let list_data_key = that.list_data_key;
				let time_slot = that.time_slot;
				//console.log(time_slot);
				let pre_date = time_slot[index]['date'];
				//console.log(pre_date);
				let no_pre_hour_slot = that.formData.no_pre_hour_slot;
				if(no_pre_hour_slot.indexOf(pre_date) > -1)
				{
					//删除
					that.formData.no_pre_hour_slot.splice(no_pre_hour_slot.indexOf(pre_date),1);
				}else
				{
					//添加
					that.formData.no_pre_hour_slot.push(pre_date);
				}
			},
			/**
			 * 保存设置
			 */
			setWorkTime:function()
			{
				var that = this;
				let formData = that.formData;
				//网络请求
				request(app.globalData.api_url+'/v1/techn/set_work_time', 'POST', formData).then((res) => {
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					if(res.data.code == 0)
					{
						setTimeout(function(){
						    that.load_service_time(); //获取服务时间
							that.load_get_work_time(); //获取技师服务时间
						}, 1000);
						uni.navigateBack();
					}else
					{
						app.is_login_check(res.data);
						app.is_techn_check(res.data);
					}
				});
			},
			/**
			 * 获取技师服务时间
			 */
			load_get_work_time:function()
			{
				var that = this;
				//网络请求
				request(app.globalData.api_url+'/v1/techn/get_work_time', 'POST', {}).then((res) => {
					if(res.data.code == 0)
					{
						let techn = res.data.data;
						that.formData.work_status = techn.work_status;
						that.formData.work_start_hour = techn.work_start_hour;
						that.formData.work_end_hour = techn.work_end_hour;
						that.formData.no_pre_hour_slot = techn.no_pre_hour_slot;
					}else
					{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						});
						app.is_login_check(res.data);
						app.is_techn_check(res.data);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
/* radio 选中后的样式 */
/deep/.uni-radio-input-checked{
	background-color: rgb(36,201,107)!important;
	border-color: rgb(36,201,107)!important;
	background-clip: content-box!important;
	box-sizing: border-box;
}
.content{
	.time-c{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.place-rem-tit{
			font-size: 28rpx;
			margin-bottom: 20rpx;
			text{
				&:first-child{
					font-weight: bold;
				}
				&:last-child{
					font-size: 24rpx;
					color: $uni-text-color-grey;
				}
			}
		}
		.time-set{
			display: flex;
			.time-lf{
				flex: 1;
				background-color: #fff;
				.time-tit{
					width:100%;
					height:70rpx;
					line-height:70rpx;
					margin-bottom: 20rpx;
					text-align:center;
					font-size: 24rpx;
					&.time-act{
						background-color:$uni-bg-color-grey;
						color: $uni-text-color-active;
						position: relative;
						&:before{
							position: absolute;
							left: 0;
							top:30%;
							content: "";
							width:2px;
							height: 30rpx;
							background-color: $uni-text-color-active;
						}
					}
				}
			}
			.time-rt{
				flex:2.5;
				background-color:$uni-bg-color-grey;
				.time-con{
					display: inline-block;
					width:25%;
					margin:20rpx 0 0 30rpx;
					font-size: 24rpx;
					text-align: center;
					height: 50rpx;
					line-height:50rpx;
					background-color: $uni-text-color-active;
					color: #fff;
					&.time-con-act{
						background:none;
						background-color:$uni-text-color-grey;
						text-decoration: line-through;

					}
				}
			}			
		}
	}
	.place-time{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.place-time-tp{
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			border-bottom:1px solid #eee;
			padding-bottom:10rpx;
			margin-bottom:10rpx;
			.place-time-name{
				flex: 1;
				font-size:28rpx;
				font-weight: bold;
			}
			.place-time-con{
				flex: 2;
				text-align: right;
				text{
					&:first-child{
						font-size:28rpx;
						color: $uni-text-color-grey;
					}
				}
				label{
					font-size: 28rpx;
					radio{
						transform: scale(0.7);
					}				
				}
	
			}
		}
		.place-time-bt{
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			.place-time-name{
				flex: 1;
				font-size:28rpx;
				font-weight: bold;
			}
			.place-time-con{
				flex: 2;
				text-align: right;
				vertical-align: middle;
				text{
					&:first-child{
						font-size:28rpx;
						color: $uni-text-color-grey;
					}
					&.place-coupon{
						color: #ff0000;
					}
				}
			}
		}
		.place-km{
			margin-top:10rpx;
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}
	}
	.detail-sel{
		padding:30rpx 20rpx;
		position:fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		text-align: center;
		.detail-btn{
			height:80rpx;
			line-height: 80rpx;
			border-radius: 35rpx;
			color: #fff;
			font-size: 28rpx;
			background-color:$uni-text-color-active;
		}
	}
	.h110{
		width: 100%;
		height:110rpx;
	}
}
</style>